<template>
 <div>
 <Title :title="title"></Title>
 <div style="height: 200px;" ref="boxy2"></div>
 </div>
</template>

<script setup>
import Title from './Title.vue'
import { ref, onMounted } from 'vue'
import moment from 'moment'
import { get } from '@/utils/request'
const title = ref(' 实时颗粒物 ')
import { DualAxes } from '@antv/g2plot';

const boxy2 = ref(null);

let temb3 = ref([]);

const loadb3 = () => {
    const dualAxes = new DualAxes(boxy2.value, {
        data: [temb3.value, temb3.value],
        xField: 'time',
        yField: ['pm10', 'pm25'],
        geometryOptions: [
            {
                geometry: 'line',
                color: 'yellow',
            },
            {
                geometry: 'line',
                color: 'blue',
            },
        ],
    });

    dualAxes.render();

}

const getTemData = async () => {
    let response = await get('/dashboard/pageQueryTodayData', {
        page: 1,
        pageSize: 60
    });
    response.data.list.forEach((item, index, arr) => {
        item.time = moment(item.insert_time).format('HH:mm');
    })
    temb3.value = response.data.list;
    
}

onMounted(async () => {
    await getTemData()
    loadb3();
})

</script>

<style scoped lang="less"></style>